<template>
  <div class="club-events">
    <div class="page-header">
      <h1>活动管理</h1>
      <p>管理社团活动和报名情况</p>
    </div>
    
    <!-- 操作栏 -->
    <div class="toolbar">
      <el-card>
        <el-row :gutter="20" align="middle">
          <el-col :span="6">
            <el-input
              v-model="searchForm.keyword"
              placeholder="搜索活动名称"
              :prefix-icon="Search"
              clearable
            />
          </el-col>
          <el-col :span="4">
            <el-select
              v-model="searchForm.status"
              placeholder="活动状态"
              clearable
            >
              <el-option label="未开始" :value="0" />
              <el-option label="进行中" :value="1" />
              <el-option label="已结束" :value="2" />
            </el-select>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="handleSearch">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
          </el-col>
          <el-col :span="4">
            <el-button type="success" @click="handleCreateEvent">
              <el-icon><Plus /></el-icon>
              创建活动
            </el-button>
          </el-col>
        </el-row>
      </el-card>
    </div>
    
    <!-- 活动列表 -->
    <div class="events-section">
      <el-row :gutter="20">
        <el-col
          v-for="event in eventList"
          :key="event.id"
          :span="8"
          class="event-card-col"
        >
          <el-card class="event-card" shadow="hover">
            <div class="event-header">
              <h3 class="event-title">{{ event.title }}</h3>
              <el-tag
                :type="getStatusType(event.status)"
                size="small"
              >
                {{ getStatusText(event.status) }}
              </el-tag>
            </div>
            
            <div class="event-content">
              <p class="event-description">{{ event.content }}</p>
              
              <div class="event-info">
                <div class="info-item">
                  <el-icon><Location /></el-icon>
                  <span>{{ event.location || '待定' }}</span>
                </div>
                <div class="info-item">
                  <el-icon><Clock /></el-icon>
                  <span>{{ formatDateTime(event.start_time) }}</span>
                </div>
                <div class="info-item">
                  <el-icon><User /></el-icon>
                  <span>{{ event.participant_count }}/{{ event.max_participants || '不限' }}人</span>
                </div>
              </div>
            </div>
            
            <div class="event-actions">
              <el-button
                type="primary"
                @click="handleEditEvent(event.id)"
              >
                编辑
              </el-button>
              <el-button
                @click="handleViewParticipants(event.id)"
              >
                查看报名
              </el-button>
              <el-button
                type="danger"
                @click="handleDeleteEvent(event.id)"
              >
                删除
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    
    <!-- 分页 -->
    <div class="pagination-section">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[12, 24, 48]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Plus, Location, Clock, User } from '@element-plus/icons-vue'

export default {
  name: 'ClubEvents',
  components: {
    Search,
    Plus,
    Location,
    Clock,
    User
  },
  setup() {
    const searchForm = reactive({
      keyword: '',
      status: ''
    })
    
    const eventList = ref([
      {
        id: 1,
        title: '校园摄影大赛',
        content: '展示你的摄影才华，记录校园美好瞬间',
        location: '艺术楼展厅',
        start_time: '2024-01-20 14:00:00',
        max_participants: 50,
        participant_count: 23,
        status: 0 // 0: 未开始, 1: 进行中, 2: 已结束
      },
      {
        id: 2,
        title: '摄影技巧分享会',
        content: '分享人像摄影和风景摄影的技巧',
        location: '教学楼201',
        start_time: '2024-01-18 19:00:00',
        max_participants: 30,
        participant_count: 28,
        status: 1
      },
      {
        id: 3,
        title: '外拍活动',
        content: '组织成员到公园进行外拍实践',
        location: '中山公园',
        start_time: '2024-01-15 09:00:00',
        max_participants: 20,
        participant_count: 18,
        status: 2
      }
    ])
    
    const pagination = reactive({
      currentPage: 1,
      pageSize: 12,
      total: 15
    })
    
    const getStatusType = (status) => {
      const typeMap = {
        0: 'primary',
        1: 'success',
        2: 'info'
      }
      return typeMap[status] || 'info'
    }
    
    const getStatusText = (status) => {
      const textMap = {
        0: '未开始',
        1: '进行中',
        2: '已结束'
      }
      return textMap[status] || '未知'
    }
    
    const formatDateTime = (dateTime) => {
      if (!dateTime) return '待定'
      const date = new Date(dateTime)
      return date.toLocaleString('zh-CN', {
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      })
    }
    
    const handleSearch = () => {
      console.log('搜索条件:', searchForm)
      // 这里实现搜索逻辑
    }
    
    const handleCreateEvent = () => {
      console.log('创建活动')
      // 这里实现创建活动逻辑
    }
    
    const handleEditEvent = (eventId) => {
      console.log('编辑活动:', eventId)
      // 这里实现编辑活动逻辑
    }
    
    const handleViewParticipants = (eventId) => {
      console.log('查看报名情况:', eventId)
      // 这里实现查看报名情况逻辑
    }
    
    const handleDeleteEvent = async (eventId) => {
      try {
        await ElMessageBox.confirm(
          '确定要删除该活动吗？',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
        
        // 这里实现删除活动逻辑
        ElMessage.success('已删除活动')
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('操作失败')
        }
      }
    }
    
    const handleSizeChange = (val) => {
      pagination.pageSize = val
      // 重新加载数据
    }
    
    const handleCurrentChange = (val) => {
      pagination.currentPage = val
      // 重新加载数据
    }
    
    onMounted(() => {
      // 初始化数据
    })
    
    return {
      searchForm,
      eventList,
      pagination,
      getStatusType,
      getStatusText,
      formatDateTime,
      handleSearch,
      handleCreateEvent,
      handleEditEvent,
      handleViewParticipants,
      handleDeleteEvent,
      handleSizeChange,
      handleCurrentChange
    }
  }
}
</script>

<style lang="scss" scoped>
.club-events {
  .page-header {
    margin-bottom: 24px;

    h1 {
      margin: 0 0 8px;
      font-size: 28px;
      font-weight: 600;
      color: #303133;
    }

    p {
      margin: 0;
      font-size: 16px;
      color: #606266;
    }
  }

  .toolbar {
    margin-bottom: 24px;
  }

  .events-section {
    margin-bottom: 32px;

    .event-card-col {
      margin-bottom: 20px;
    }

    .event-card {
      height: 100%;
      transition: transform 0.2s;

      &:hover {
        transform: translateY(-2px);
      }

      .event-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;

        .event-title {
          margin: 0;
          font-size: 16px;
          font-weight: 600;
          color: #303133;
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      .event-content {
        .event-description {
          margin: 0 0 12px;
          font-size: 14px;
          color: #606266;
          line-height: 1.5;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .event-info {
          .info-item {
            display: flex;
            align-items: center;
            margin-bottom: 6px;
            font-size: 13px;
            color: #606266;

            .el-icon {
              margin-right: 6px;
              font-size: 14px;
            }

            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }

      .event-actions {
        display: flex;
        gap: 6px;
        margin-top: 16px;
        flex-wrap: wrap;
      }
    }
  }

  .pagination-section {
    display: flex;
    justify-content: center;
  }
}
</style>
